<template>
  <div>
    <div>
      <div class="cards">
        <el-input style="width:240px;margin-right: 10px; text-align: center" v-model="data.phone" placeholder="请输入手机号查询" :prefix-icon="Search"></el-input>
        <div class="demo-date-picker" style="margin-right: 10px">
          <div class="block" >
            <el-date-picker
                v-model="value2"
                type="daterange"
                start-placeholder="Start Date"
                end-placeholder="End Date"
            />
          </div>
        </div>
        <el-button type="primary" @click="load">查 询</el-button>
        <el-button type="primary" @click="rest">重 置</el-button>
        <el-button type="warning" style="margin-right: 20px" @click="delBatch">批量删除</el-button>
      </div>
      <div class="card" style="margin-top: 10px">
        <el-table :data="data.tableData" @selection-change="handleSelectionChange" stripe>
          <el-table-column type="selection"  style="border: #666666; width:10px"></el-table-column>
          <el-table-column label="药材名称" prop="name"></el-table-column>
          <el-table-column label="收货地址" prop="address"></el-table-column>
          <el-table-column label="收货人" prop="receiver"></el-table-column>
          <el-table-column label="手机号" prop="phone"></el-table-column>
          <el-table-column label="金额(元)" prop="price_sum"></el-table-column>
          <el-table-column label="下单时间" prop="create_date" style="label-width: 20px; size:20px"></el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button @click="handleDelete(scope.row.id)" type="danger" :icon="Delete" circle />
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
              @current-change="load"
              @size-change="load"
              v-model:current-page="data.pageNum"
              v-model:page-size="data.pageSize"
              :page-sizes="[5,10,15,20]"
              background
              layout="total,sizes,prev,pager,next,jumper"
              :total="data.total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {reactive, onMounted} from "vue";
import {Search,Delete,Edit} from "@element-plus/icons-vue"
import { ref } from 'vue'
import request from '@/utils/request.js';
import {ElMessage, ElMessageBox} from "element-plus";

const value2 = ref([])
const data = reactive({
  phone:null,
  tableData:[],
  pageNum:1,
  pageSize:10,
  total:0,
  userList:[],
  formVisible:false,
  form:[],
  ids:[]
})
const load = () => {
  const [startDate, endDate] = value2.value;
  const params = {
    pageNum: data.pageNum,
    pageSize: data.pageSize,
  };
  if(data.phone){
    params.phone=data.phone;
  }
  // 如果选择了日期范围，添加日期参数到请求中
  if (startDate && endDate) {
    params.startDate = startDate.toISOString().split('T')[0];
    params.endDate = endDate.toISOString().split('T')[0];
  }
  request.get('/order/findByOrderAndDateRange', {
    params: params
  }).then(res => {
    console.log(res)
    data.tableData = res.data.content;
    data.total = res.data.page.totalElements;
  });
}
onMounted(() => {
  load()
})
//重置
const rest = () => {
  data.phone = null
  value2.value = []
  load()
}
// 将状态值转换为布尔类型
const convertStatusToBoolean = (form) => {
  if (form.status === '激活') {
    form.status = 1;
  } else if (form.status === '禁用') {
    form.status = 0;
  }
  return form;
}

//删除
const handleDelete = (id) =>{
  ElMessageBox.confirm('删除数据后无法恢复，您确认删除吗？','温馨提示',{type:'warning'}).then(() => {
    request.delete('order/deleteOrder/'+id).then(res => {
      console.log(res)
      if(res.code === 200){
        ElMessage.success("删除成功")
        load()
      }else{
        ElMessage.error(res.message)
      }
    })
  }).catch()
}
//多选
const handleSelectionChange =(rows) =>{
  console.log(rows)
  data.ids = rows.map(row => row.id)
  console.log(data.ids)
}
//批量删除
const delBatch = () => {
  if(data.ids.length === 0){
    ElMessage.warning('请选择数据')
    return
  }
  ElMessageBox.confirm('删除数据后无法恢复，您确认删除吗？','温馨提示',{type:'warning'}).then(() => {
    request.delete('order/deleteBatchType',{data:data.ids}).then(res => {
      if(res.code === 200){
        ElMessage.success("删除成功")
        load()
      }else{
        ElMessage.error(res.message)
      }
    })
  }).catch()
}
</script>
<style scoped>
.demo-date-picker {
  display: inline-block;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.cards {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
/* 调整表单元素的间距 */
.el-form-item {
  margin-bottom: 15px;
}
/* 可以对dialog的底部操作按钮部分进行样式微调 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>